﻿<%@page import="language.Languages"%>
<%@page import="nftrainer.helper.NFMap"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="java.util.HashMap"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery.serializetree.js"></script>
		<script type="text/javascript">
			$(function(){
				var counter = 1;
				$("th.tbl-header-draggable").draggable({ 
					helper: 'clone', 
					cursor: 'move', 
					revert: 'invalid' 
				});
				var dropOptions = { activeClass: "ui-state-default",
					hoverClass: "ui-state-hover",
					drop: function( event, ui ) {
						var dragText = ui.draggable.text();
						if( !($("ul.liste").has( "li:contains('" + dragText + "')").length) ) {
							$( this ).find( ".placeholder" ).remove();
							if( $(this).is(":empty") ) {
								$('<ul id="liste' + counter + '" class="liste"><li class="placeholder">Tabellenspalten hier herein</li></ul>').droppable( dropOptions ).appendTo( "div#dropping-zone" );
								counter++;
							}
							$( "<li class='liste-option'></li>" ).text( dragText ).attr("id", dragText).appendTo( this );								
						} else {
							$("div#error-dialog").dialog({
								modal: true,
								resizable: false
							});
						}
					}
				};
				
				$( "#dropping-zone ul" ).droppable( dropOptions );
				$("button").click(function() {							
					var elements = $("ul");
					var inhalt = "";
					$.each( elements, function() { 
						var liste = $(this);
						if ( liste.has( "li.liste-option" ).length ) {
							inhalt += liste.serializeTree("id", liste.attr("id")); 
						}
					});
					$("div#test").html( inhalt ); 
				});
			});
		</script>
		<style type="text/css">
			table, td {
				border: 1px solid black;
			}
			th {
				width: 100px;
				border: 1px solid black;
				cursor: move;
				background: #00BBFF;
			}
			ul {
				width: 140px;
				border: 1px solid red;
				padding: 20px;
				list-style-type: none;
			}
			li {
				font-weight: bold;
				border: 1px solid black;
				background: #00BBFF;
				margin: 3px;
				width: 100px;
			}
			li.placeholder {
				font-weight: normal;
				border: 0;
				background: none;
				text-align: center;
			}
		</style>	
	</head>
	<body>
		<jsp:useBean id="c" scope="session" class="nftrainer.Controller"/>
		<jsp:useBean id="textHandler" scope="session" class="language.TextHandler"/>
		<%
		if (request.getParameter("language") != null) {
			if (request.getParameter("language").equals("en_GB")) {
				textHandler.setLanguage(Languages.en_GB);
			} else if (request.getParameter("language").equals("de_DE")) {
				textHandler.setLanguage(Languages.de_DE);
			}
		}
		%>
		<div style="width:800px;">
			<%=textHandler.printf("index.task") %><br /><br />
			<%
			if (!c.isStarted()) {
				c.start(textHandler);
			}

			out.println(c.getTask()+"<br /><br />");
			HashMap<Integer, String[][]> map;
			
			map = c.getActualTaskTable();
			int size = map.size();
			for (int n = 0; n < size; n++) {
				out.println("<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"display\" id=\"registrations\">");
				String[][] table = map.get(n);
				for (int i = 0; i < table.length; i++) {
					if (i == 0) {
						out.println("<thead>");
					} else if (i == 1) {
						out.println("<tbody>");
					}
					out.println("<tr>");
					for (int j = 0; j < table[0].length; j++) {
						out.print((i==0 ? "<th class=\"tbl-header-draggable\">" : "<td>")+table[i][j]+((i==0) ? "</th>" :"</td>"));
					}
					out.println("</tr>");
					if (i == 0) {
						out.println("</thead>");
					}
				}
				out.println("</tbody>");
				out.println("</table>");
			}
			
			out.println("<br />"+c.getActualSubtask()+"<br />");
			%>
			<div id="dropping-zone">
				<ul id="liste0" class="liste"><li class="placeholder">Tabellenspalten hier herein</li></ul>
			</div>
			
			<button>send</button>
			<div id="test"></div>
			<div id="error-dialog" style="display: none;" title="Fehler">Die gewählte Spalte wurde schon einmal verwendet.</div>
		</div>
	</body>
</html>